/*
 * @Description: 每一个阶段种各个情感的最具有代表性的书籍展示
 * @Author: zy
 * @Date: 2020-12-18 15:02:24
 * @LastEditors: zy
 * @LastEditTime: 2021-05-03 20:01:09
 */
import * as d3 from 'd3'
export class TestReadPath {
  color = d3.scaleOrdinal(d3.schemeCategory10)

  constructor (divId) {
    this.divId = divId
    this.initChart()
  }

  initChart () {
    this.chart = {}
    this.chart.padding = {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10
    }
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight -
          this.chart.padding.top -
          this.chart.padding.bottom
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth -
          this.chart.padding.left -
          this.chart.padding.right

    this.chart.svg = d3
      .select('#' + this.divId)
      .append('svg')
      .attr('width', this.chart.divWidth +
        this.chart.padding.left +
        this.chart.padding.right
      )
      .attr('height', this.chart.divHeight +
        this.chart.padding.top +
        this.chart.padding.bottom
      )
      .attr('class', 'svg_chart')
  }

  setData (data, bookData) {
    this.data = data
    this.book = bookData
    // console.log(this.book)
  }

  computeLayOut () {
    const height = this.chart.divHeight * 0.85
    const width = this.chart.divWidth / 3
    this.chart.itemWidth = width
    this.chart.centroY = height
    this.chart.r = width * 0.5
    this.chart.centroX = width * 0.5
    this.chart.fontSize = width / 24

    const startAngle = -Math.PI * 0.95
    const endAngle = -Math.PI * 0.05
    this.chart.r = Math.min(this.chart.itemWidth * 0.5, height) * 0.9
    this.chart.angleScale = d3.scaleLinear().range([startAngle, endAngle])

    this.simulation = d3.forceSimulation(this.data.nodes)
      .force('link', d3.forceLink(this.data.links))
  }

  render (book, grade) {
    this.renderGrade()
    this.renderBook(book, grade)
  }

  renderGrade () {
    this.computeLayOut()

    let rect = this.chart.svg.selectAll('.grades')
      .data(this.data.nodes)

    let rectEnter = rect.enter()
      .append('g')
      .attr('class', 'grades')
      .attr('id', function (d, i) {
        return d.name.split(' ')[0] + d.name.split(' ')[1].replace('-', '')
      })

    rectEnter.append('circle')
      .attr('cx', (d, i) => {
        d.x = this.chart.centroX + this.chart.itemWidth * i
        d.y = this.chart.centroY
        return d.x
      })
      .attr('cy', d => d.y)
      .attr('r', 20)
      .attr('fill', (_, i) => this.color(i))
      .style('stroke', (_, i) => this.color(i))
      .style('stroke-width', 1)

    rectEnter.append('text')
      .attr('x', (d, i) => {
        return d.x - this.chart.fontSize * d.name.length * 0.3
      })
      .attr('y', d => d.y + 40)
      .text(d => d.name)
      .attr('font-size', this.chart.fontSize)

    let link = this.chart.svg.selectAll('path')
      .data(this.data.links)

    let linkEnter = link.enter()
      .append('g')
      .attr('class', 'links')

    linkEnter.append('path')
      .attr('d', d => {
        let path = `M ${d.source.x + 20} ${d.source.y}
        L ${d.target.x - 20} ${d.target.y}`
        return path
      })
      .attr('marker-end', 'url(#marker)')
      .style('stroke-width', 2)
      .style('stroke', 'red')

    this.chart.svg.append('marker')
      .attr('id', 'marker')
      .attr('markerUnits', 'userSpaceOnUse')
      .attr('viewBox', '0 -5 10 10')// 坐标系的区域
      .attr('refX', 10)// 箭头坐标
      .attr('refY', 0)
      .attr('markerWidth', 12)// 标识的大小
      .attr('markerHeight', 12)
      .attr('orient', 'auto')// 绘制方向，可设定为：auto（自动确认方向）和 角度值
      .attr('stroke-width', 2)// 箭头宽度
      .append('path')
      .attr('d', 'M0,-5L10,0L0,5')// 箭头的路径
      .attr('fill', '#000000')// 箭头颜色
  }

  renderBook (books, grade) {
    let g = this.chart.svg.select('#grade12')

    books = books.map((d, i) => {
      d.index = i
      return d
    })
    this.chart.angleScale.domain(d3.extent(books.map(d => d.index)))

    let gbooks = g.selectAll('.book')
      .data(books, function (d) {
        return d.bookName
      })

    let bookEnter = gbooks.enter()
      .append('g')
      .attr('class', 'book')

    bookEnter.append('path')
      .attr('d', d => {
        d.x = this.chart.centroX + this.chart.r * Math.cos(this.chart.angleScale(d.index))
        d.y = this.chart.centroY + this.chart.r * Math.sin(this.chart.angleScale(d.index))
        let path = `M ${this.chart.centroX} ${this.chart.centroY}
        Q ${(this.chart.centroX + d.x) * 0.5} ${(this.chart.centroY + d.y) * 0.4},
        ${d.x} ${d.y}`
        return path
      })
      .attr('marker-end', 'url(#marker)')
      .style('stroke-width', 2)
      .style('stroke', 'red')
      .style('fill', 'none')

    bookEnter.append('circle')
      .attr('cx', d => d.x)
      .attr('cy', d => d.y)
      .attr('r', 10)
      .style('fill', 'red')
      .style('stroke', 'red')
      .style('stroke-width', 1)
  }
}
